<template>
  <div class="vistor-register">
      <Row :gutter="15">
          <Col span="8" style="margin-bottom: 20px">
            <DatePicker v-model="dataRange" type="daterange" split-panels placeholder="请选择登记时间" style="width: 100%"></DatePicker>
          </Col>

          <Col span="8">
            <Input v-model="keyword" placeholder="请输入姓名／手机号" style="width: 100%" />
          </Col>

          <Col span="8">
            <Button type="primary" @click="getData()">搜索</Button>
            <Button type="primary" @click="reset">重置</Button>
          </Col>
      </Row>

      <Table :columns="columns" :data="data" :loading="isLoading"></Table>

      <div class="page-wrap">
        <Page
            @on-change="getData(false)"
            :total="count"
            :page-size="limit"
            :current.sync="page"
            show-elevator
            show-total>
        </Page>
      </div>

      <addVisitor v-model="isOpenAddVistorModal" :homeId="homeId" :status="status" :form="formData" @refresh="getData()"></addVisitor>
  </div>
</template>

<script>
import { http, api } from '@/libs/http'
import { certificates } from '@/libs/const'
import dayjs from 'dayjs'
import addVisitor from '../add-visitor'
export default {
  data () {
    return {
      keyword: '', // 关键字
      dataRange: [dayjs().subtract(3, 'month').startOf('day').toDate(), dayjs().endOf('day').toDate()],
      page: 1,
      limit: 20,
      count: 0,
      data: [],
      isOpenAddVistorModal: false,
      status: 1, // 1 => 查看 2 => 编辑
      formData: {}, // 表格数据
      certificates,
      isLoading: false,
      columns: [
        {
          title: '访客姓名',
          align: 'center',
          key: 'visitor_name'
        },
        {
          title: '访客手机号码',
          align: 'center',
          key: 'visitor_phone'
        },
        {
          title: '证件类型',
          align: 'center',
          render: (h, p) => <span>{certificates[p.row.visitor_identity_type]}</span>
        },
        {
          title: '证件号码',
          align: 'center',
          key: 'visitor_identity_number'
        },
        {
          title: '登记时间',
          width: 150,
          align: 'center',
          render: (h, p) => <span>{`${dayjs(p.row.created_at).format('YYYY-MM-DD HH:mm')}`}</span>
        },
        {
          title: '登记人',
          align: 'center',
          key: 'create_user_name'
        },
        {
          title: '操作',
          align: 'center',
          width: 220,
          render: (h, p) => (
            <div>
              <i-button type="primary" class="btn-left" size="small" onClick={() => { this.show(p.row) }}>
                                查看
              </i-button>

              <i-button type="primary" size="small" onClick={() => { this.edit(p.row) }}>
                                编辑
              </i-button>
            </div>
          )
        }
      ]
    }
  },

  computed: {
    offset () {
      return (this.page - 1) * this.limit
    }
  },

  watch: {
    '$store.state.room.refresh_vistor' () {
      this.getData()
    }
  },

  props: {
    homeId: {
      type: [Number, String],
      require: true
    }
  },

  components: {
    addVisitor
  },

  mounted () {
    this.getData()
  },

  methods: {
    reset () {
      this.keyword = ''
      this.dataRange = [dayjs().subtract(3, 'month').startOf('day').toDate(), dayjs().endOf('day').toDate()]
      this.getData()
    },

    /**
        * 展示表单数据
        */
    show (row) {
      this.handleFormData(row, 1)
    },

    /**
        * 编辑表单数据
        */
    edit (row) {
      this.handleFormData(row, 2)
    },

    handleFormData (row, status) {
      const { id, visitor_name, visitor_phone, visitor_identity_type, visitor_identity_number, to_visitor_name, to_visit_address, visit_description, visit_time_range } = row
      this.formData = {
        name: visitor_name,
        phone: visitor_phone,
        identity_type: visitor_identity_type,
        identity_number: visitor_identity_number,
        to_visitor_name,
        to_visit_address,
        visit_description,
        visit_time_range,
        id
      }
      this.status = status
      this.isOpenAddVistorModal = true
    },

    async getData (isReset = true) {
      if (isReset) {
        this.page = 1
      }

      const params = {
        limit: this.limit,
        offset: this.offset,
        keyword: this.keyword,
        visitor_start_time: new Date(this.dataRange[0]).valueOf(),
        visitor_end_time: new Date(this.dataRange[1]).valueOf()
      }

      this.isLoading = true
      try {
        const res = await http.fetch(this, api.show_visitor_record, [this.homeId], params)

        if (!res) {
          return
        }

        const { count, rows } = res
        this.count = count
        this.data = rows

        this.isLoading = false
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style lang='less'>
.vistor-register {
    padding: 5px 15px 0;
    box-sizing: border-box;
}

.page-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -15px;
}

.btn-left {
    margin-right: 5px;
}
</style>